import { getArticles, getChannels } from "@/store/actions/article"
import { Card, Breadcrumb, Radio, Form, Select, DatePicker, Button, Table, Space, Tag, Image } from "antd"
import { useEffect } from "react"
import { useDispatch, useSelector } from "react-redux"
import { Link } from "react-router-dom"
import styles from './index.module.scss'
import img from '@/assets/error.png'
import {
    EditOutlined,
    DeleteOutlined
} from '@ant-design/icons';

const STATUS = [
    { type: -1, text: '全部', color: 'gold' },
    { type: 0, text: '草稿', color: 'red' },
    { type: 1, text: '待审核', color: 'yellow' },
    { type: 2, text: '审核通过', color: 'green' },
    { type: 3, text: '审核失败', color: 'gray' },
]
export default function Article() {
    const { channels, articles: { results } } = useSelector(state => state.article)
    const dispatch = useDispatch()
    useEffect(() => {
        dispatch(getChannels())
        dispatch(getArticles())
    }, [dispatch])

    const columns = [
        {
            title: '封面',
            dataIndex: 'cover',
            render: ({ images, type }) => {
                if (type > 0) {
                    return <Image src={images[0]} fallback={img} width={200} height={150}></Image>
                } else {
                    return <Image width={200} height={120} src={img}></Image>
                }
            }
        },
        {
            title: '标题',
            dataIndex: 'title',
        },
        {
            title: '状态',
            dataIndex: 'status',
            key: 'status',
            render: (status) => {
                const { text, color } = STATUS.find(item => item.type === status)
                return <Tag color={color}>{text}</Tag>
            }
        },
        {
            title: '发布时间',
            dataIndex: 'pubdate',
        },
        {
            title: '阅读数',
            dataIndex: 'read_count',
        },
        {
            title: '评论数',
            dataIndex: 'comment_count',
        },
        {
            title: '点赞数',
            dataIndex: 'like_count',
        },
        {
            title: '操作',
            dataIndex: 'id',
            key: 'id',
            render(id) {
                return (
                    <Space>
                        <Button type="primary" shape="circle" icon={<EditOutlined />} />
                        <Button type="danger" shape="circle" icon={<DeleteOutlined />} />
                    </Space>
                )
            }
        },
    ];

    return (
        <div className={styles.root}>
            <div className="site-card-border-less-wrapper">
                <Card
                    title={
                        <Breadcrumb>
                            <Breadcrumb.Item>
                                <Link to={{ pathname: '/home' }}>首页</Link>
                            </Breadcrumb.Item>
                            <Breadcrumb.Item>文章列表</Breadcrumb.Item>
                        </Breadcrumb>
                    }
                >
                    <Form initialValues={{ status: -1 }} size="large">
                        <Form.Item label="状态" name="status">
                            <Radio.Group>
                                {STATUS.map(item => (
                                    <Radio key={item.type} value={item.type}>{item.text}</Radio>
                                ))}
                            </Radio.Group>
                        </Form.Item>
                        <Form.Item label="频道" name="channel_id">
                            <Select placeholder="请选择文章频道" style={{ width: 200 }}>
                                {channels.map(item => (
                                    <Select.Option value={item.id} key={item.id} >{item.name}</Select.Option>
                                ))}
                            </Select>
                        </Form.Item>
                        <Form.Item label="日期">
                            <DatePicker.RangePicker />
                        </Form.Item>
                    </Form>
                    <Button type="primary">筛选</Button>
                </Card>

                <Card>
                    <p>根据筛选条件共查询到XXXX条结果</p>
                    <Table columns={columns} dataSource={results} rowKey={(item) => item.id} />
                </Card>
            </div>
        </div >
    )
}